<template>
  <div style="margin-left: 2%;margin-right: 2%;margin-top: 10px">
    <!-- 表单 -->
    <el-card>
      <span style="font-size: 13px">项目编号：</span>
      <el-input v-model="projectSearch.projectCode" placeholder="请输入内容" style="width: 130px"></el-input>

      <span style="font-size: 13px;margin-left: 3%">项目名称：</span>
      <el-input v-model="projectSearch.projectName" placeholder="请输入内容" style="width: 130px"></el-input>


      <span style="font-size: 13px;margin-left: 3%">采购类别：</span>
      <el-select v-model="projectSearch.purchaseCategoryId" placeholder="请选择">
        <el-option label="货物类" value="1"></el-option>
        <el-option label="服务类" value="2"></el-option>
        <el-option label="工程类" value="3"></el-option>
      </el-select>

      <div style="display: inline;margin-left: 10%">
        <el-button class="search-button" size="mini" @click="searchConditon" type="primary">查询</el-button>
        <el-button size="mini" @click="clearMes">清空查询</el-button>
      </div>
    </el-card>

    <div style="margin-top: 10px;margin-bottom: 10px">
      <!-- 表格 -->
      <el-table
          :data="projectTable"
          style="width: 100%"
          v-loading="loading"
          border
      >
        <el-table-column v-if="false" prop="projectId" label="序号"></el-table-column>
        <el-table-column prop="projectCode" label="项目编号"></el-table-column>
        <el-table-column prop="projectName" label="项目名称"></el-table-column>
        <el-table-column
            prop="purchaseCategoryId"
            label="采购类别"
        >
          <template slot-scope="scope">
            <!-- 根据采购类别的值显示不同文本 -->
            <span v-if="scope.row.purchaseCategoryId === 1">货物类</span>
            <span v-else-if="scope.row.purchaseCategoryId === 2">服务类</span>
            <span v-else-if="scope.row.purchaseCategoryId === 3">工程类</span>
            <span v-else>其他采购类别</span>
          </template>
        </el-table-column>
        <el-table-column prop="purchaseMethod" label="采购方式"></el-table-column>
        <el-table-column prop="budget" label="预算金额（元）"></el-table-column>
        <el-table-column  label="资格条件评审" width="160">
          <template slot-scope="scope">
            {{ scope.row.quaSubmitStatus }}（{{ scope.row.quaApproveStatus }}）
          </template>
        </el-table-column>
        <el-table-column prop="quaApproveTime" label="审核通过时间"></el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="{$index,row}">
            <!-- 在这里添加操作按钮 -->
            <span @click="goToAddSupplier(row)"
                  :style="{
                       textAlign: 'center',
                       marginLeft: '7px',
                      color:row.quaApproveStatus === '审批通过' ? '#409eff' : 'gray'
                         }"
            >潜在供应商审批</span>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {getShoppingInvitation} from "@/api/shopping/invitation";
import purchasingFileManage from "@/components/shopping/purchasingFileManage";
import {searchProject} from "@/api/concludeContract";
import {reqContractConditionSer} from "@/api/contractApprove";
import {reqConditionSer, reqGetAllItems} from "@/api/purchaseItemManage";
import {getAllProject} from "@/api/potentialSuppliers/potentialSuppliers";


export default {
  data() {
    return {
      projectSearch: {
        projectName: "",
        projectCode: "",
        purchaseCategoryId: "",
      },
      projectTable: [
      ],
      projectList:[],
      currentPage: 1,
      pageSize: 20,
      loading: true, // 修改是否显示加载页面
      total: 0,
      pageflag:false,
      showPageSearch: false,
    };
  },

  mounted() {
    //初始化
    this.getAllitems()
  },
  components: {
    purchasingFileManage,
  },
  methods: {

    async getAllitems(){
      let res =await reqGetAllItems()
      console.log(res)
      if(res.data.code===200){
        this.loading = false;
        this.projectTable = res.data.data.records.map(item => {
          return { ...item, projectId: item.projectId };
        });
        this.total = res.data.data.total;
      }else {
        this.$message.error(res.data.msg);
      }
    },

    //查询
    async searchConditon() {
      this.loading = true
      let theDatas = {
        projectCode:this.projectSearch.projectCode,
        projectName:this.projectSearch.projectName || '',
        purchaseCategoryId:this.projectSearch.purchaseCategoryId,
      }
      if(!this.pageflag){
        this.currentPage = 1;
      }
      let pageInfo = this.currentPage + "/" + this.pageSize
      let res = await reqConditionSer(pageInfo,theDatas)
      this.showPageSearch=true
      if (res) {
        this.loading = false
      }
      if(res.data.code===200){
        this.projectTable = res.data.data.record;
        this.total=res.data.data.total
      }else {
        this.projectTable = [];
        this.total = 0;
        this.$message(res.data.msg);
      };
      this.pageflag = false
    },
    //清空查询
    clearMes() {
      this.showPageSearch=false
      Object.keys(this.projectSearch).forEach(index => this.projectSearch[index] = '')
    },

    //分页符
    handleSizeChange(val){
      this.pageSize = val;
      this.searchConditon();
    },
    handleCurrentChange(val){
      this.currentPage = val;
      this.pageflag=true,
          this.searchConditon()
    },

    //跳转
    goToAddSupplier(row) {
      if (row.quaApproveStatus !== '审批通过'){
        this.$message("项目没有审批通过不能查看,请联系采购管理进行审批")
      }else {
        // console.log(row.projectId)
        this.$router.push({
          name: 'potentialSuppliersApprovalManager',
          params: {
            projectCode: row.projectCode,
            projectName: row.projectName,
            purchaseCategoryId: row.purchaseCategoryId,
            budget: row.budget,
            supplyerApproveStatus: row.supplyerApproveStatus,
            potentialsupplierSubmitTime: row.potentialsupplierSubmitTime,
            potentialsupplierSubmitStatus: row.potentialsupplierSubmitStatus,
            potentialsupplierSuggestion: row.potentialsupplierSuggestion,
            potentialsupplierApproveStatus: row.potentialsupplierApproveStatus,
            potentialsupplierApproveP: row.potentialsupplierApproveP,
            potentialsupplierApproveTime: row.potentialsupplierApproveTime,
            projectId: row.projectId,
          },
        });
      }
    },
  }
};
</script>

<style>
.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>
